<template>
    <div class="masterConfig-container">
        <div class="basic-config">
            <h3 class="header-box">基本配置</h3>
            <div class="basic-config-item">
                <div>
                    <span>节点名称:</span>
                    <el-input placeholder="请输入内容" v-model="basic.node_name" clearable></el-input>
                </div>
                <div>
                    <span>节点唯一标识:</span>
                    <el-input placeholder="请输入内容" v-model="basic.sole" clearable disabled></el-input>
                </div>
                <div>
                    <span>用户名:</span>
                    <el-input placeholder="请输入内容" v-model="basic.user_name" clearable></el-input>
                </div>
                <div>
                    <span>密码:</span>
                    <el-input placeholder="请输入内容" v-model="basic.password" clearable></el-input>
                </div>
                <div>
                    <span>端口号:</span>
                    <el-input placeholder="请输入内容" v-model="basic.port" clearable></el-input>
                </div>
                <div>
                    <span>MAC地址:</span>
                    <el-input placeholder="请输入内容" v-model="basic.mac_address" clearable></el-input>
                </div>
                <div>
                    <span>主从优先级:</span>
                    <el-input placeholder="请输入内容" v-model="basic.priority" clearable></el-input>
                </div>
                <div>
                    <span>虚拟网关:</span>
                    <el-input placeholder="请输入内容" v-model="basic.gateway" clearable></el-input>
                </div>
            </div>
        </div>
        <div class="theme-config">
            <h3 class="header-box">主题配置</h3>
            <div class="theme-config-item position">
                <i class="el-icon-circle-plus-outline plus" @click="addTheme"></i>
                <ul>
                    <template v-for="(item, index) in theme">
                        <li :key="'topic'+index">
                            <span>topic{{index+1}}:</span>
                            <el-input placeholder="请输入内容" v-model="item.topic" clearable></el-input>
                        </li>
                        <li :key="'zoneList'+index">
                            <span>zoneList{{index+1}}:</span>
                            <el-checkbox-group v-model="item.zoneList">
                                <el-checkbox label="zone A"></el-checkbox>
                                <el-checkbox label="zone B"></el-checkbox>
                                <el-checkbox label="zone C"></el-checkbox>
                                <el-checkbox label="zone D"></el-checkbox>
                                <el-checkbox label="zone E"></el-checkbox>
                                <el-checkbox label="zone F"></el-checkbox>
                                <el-checkbox label="zone G"></el-checkbox>
                            </el-checkbox-group>
                        </li>
                    </template>
                </ul>
            </div>
        </div>
        <div class="region-config">
            <h3 class="header-box">域配置</h3>
            <div class="region-config-item position">
                <i class="el-icon-circle-plus-outline plus" @click="addRegion"></i>
                <ul>
                    <template v-for="(item, index) in region">
                        <li :key="'zone'+index">
                            <span>zone{{index+1}}:</span>
                            <el-input placeholder="请输入内容" v-model="item.zone" clearable></el-input>
                        </li>
                        <li :key="'brokerList'+index">
                            <span>brokerList{{index+1}}:</span>
                            <el-checkbox-group v-model="item.brokerList">
                                <el-checkbox label="broker A"></el-checkbox>
                                <el-checkbox label="broker B"></el-checkbox>
                                <el-checkbox label="broker C"></el-checkbox>
                                <el-checkbox label="broker D"></el-checkbox>
                                <el-checkbox label="broker E"></el-checkbox>
                                <el-checkbox label="broker F"></el-checkbox>
                                <el-checkbox label="broker G"></el-checkbox>
                                <el-checkbox label="broker H"></el-checkbox>
                                <el-checkbox label="broker I"></el-checkbox>
                                <el-checkbox label="broker J"></el-checkbox>
                            </el-checkbox-group>
                        </li>
                    </template>
                </ul>
            </div>
        </div>
        <p class="btn-content">
            <el-button type="primary" @click="saveMaster">保存</el-button>
            <el-button @click="returnBack">返回</el-button>
        </p>
    </div>
</template>

<script>
export default {
    methods: {
        saveMaster() {
            //把basic和theme和region做数据处理然后上传到服务器
            console.log(this.basic, this.theme, this.region);
        },
        //返回上一页
        returnBack() {
            this.$router.go(-1);
        },
        //添加一列
        addTheme() {
            this.theme.push({
                topic: '',
                zoneList: []
            });
        },
        addRegion() {
            this.region.push({
                zone: '',
                brokerList: []
            });
        }
    },
    //切换面包屑
    created() {
        this.$emit('change', this.$route.name);
    },
    data() {
        return {
            basic: {
                node_name: '',
                sole: '我是节点唯一标识',
                user_name: '',
                password: '',
                port: '',
                mac_address: '',
                priority: '',
                gateway: ''
            },
            theme: [
                {
                    topic: '',
                    zoneList: []
                }
            ],
            region: [
                {
                    zone: '',
                    brokerList: []
                }
            ]
        };
    }
};
</script>

<style scoped>
.masterConfig-container > div {
    width: 1000px;
    min-height: 200px;
    border: 2px solid lightgrey;
    margin: 20px auto;
    font-size: 14px;
}
.masterConfig-container .header-box {
    line-height: 35px;
    height: 35px;
    background: #f0f0f0;
    padding-left: 30px;
}
.masterConfig-container .basic-config-item {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 30px 0;
}
.masterConfig-container .basic-config-item > div {
    width: 40%;
}
.masterConfig-container .basic-config-item > div .el-input {
    margin: 10px 0;
    width: 50%;
}
.masterConfig-container .basic-config-item > div span {
    min-width: 120px;
    display: inline-block;
}

.position {
    width: 90%;
    padding: 20px 0;
    margin: 0 auto;
    position: relative;
}
.plus {
    font-size: 50px;
    color: lightgray;
    position: absolute;
    right: 50px;
    top: 50px;
    cursor: pointer;
}
.position .el-input {
    margin: 10px 0;
    width: 50%;
}
.position .el-checkbox {
    margin-top: 10px;
    margin-bottom: 10px;
}
.position ul span {
    display: inline-block;
    min-width: 120px;
}
.btn-content {
    width: 1000px;
    margin: 10px auto;
}
</style>